<template>
  <div class="contents">
    <el-table ref="shopListTable" :data="tableData" border v-loading="loadingDialig" tooltip-effect="dark"
      style="width: 100%" :row-key="getRowKeys" @expand-change="changExpand">
      <el-table-column width="55" :reserve-selection="true">
        <template slot="header" slot-scope="scope">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            :disabled="isIndeterminateDisabled"
            @change="handleSelectionChange"
          ></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.check"
            @change="handRow(scope.row, scope.$index, $event)"
            :disabled="scope.row.disabled"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="center"
        width="200"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="单位" align="center">
        <template slot-scope="scope">{{ scope.row.spu_unit.title }}</template>
      </el-table-column>
      <el-table-column prop="purchase_price" label="最近一次采购价" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column prop="market_price" label="市场价" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column width="200" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.disabled" type="text" @click="addDom(scope.$index)">添加</el-button>
          <el-button v-else style="color: red" type="text" @click="removeDom(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagi.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagi.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totle">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    // 列表加载状态
    loadingDialig: {
      type: Boolean,
      default: false,
    },
    // 列表数组
    tableList: {
      type: Array,
      default: () => [],
    },
    // 列表总数量
    totle: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [
      ],
      isIndeterminate: false,
      checkSonAll: false,
      checkAll: false,
      pagi: {
        page: 1,
        pageSize: 10,
      },
      // totle: 0,
      // 选中的数据列表
      rowActiveList: [],

      // 获取到当前展开行的index
      activeCurrentIndex: null,
      isIndeterminateDisabled: false,
    };
  },
  watch: {
    tableList: {
      handler(val) {
        this.tableData = val;
        // 获取当前列表长度
        let totalCount = this.tableData.length;
        // 定义当前列表中激活状态的数量
        let someStatusCount = 0;
        this.tableData.forEach((item) => {
          if (item.check === true) {
            someStatusCount++;
          }
        });
        // 判断当前列表的总长度与激活状态的数量是否一致,一致则激活,反之则关闭
        this.checkAll = totalCount === someStatusCount ? true : false;
        // 判断多选框是否处于中立状态
        this.isIndeterminate =
          someStatusCount > 0 && someStatusCount < totalCount;
        if (this.checkAll && !this.isIndeterminate)
          this.isIndeterminateDisabled = true;
        else this.isIndeterminateDisabled = false;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    getRowSonKeys(row) {
      return row.id;
    },
    // 多选商品
    handleSelectionChange(val) {
      this.isIndeterminate = false;
      this.tableData.forEach((item, index) => {
        if (!item.disabled) item.check = val;
        this.addDom(index);
      });
      // let list = this._.cloneDeep(this.tableData);
      // if (this.rowActiveList.length == 0) {
      //   this.rowActiveList = list;
      // } else {
      //   this.rowActiveList = this._.concat(this.rowActiveList, list);
      // }
    },
    // 单选商品
    handRow(row, index, event) {
      // 获取当前列表长度
      let totalCount = this.tableData.length;
      // 定义当前列表中激活状态的数量
      let someStatusCount = 0;
      this.tableData.forEach((item) => {
        if (item.check === event) {
          someStatusCount++;
        }
      });
      // 当点击勾选时,需将该条数据追加至rowActiveList列表中,反之则从rowActiveList找到该条数据进行剔除
      if (event) {
        // this.rowActiveList.push(row);
        this.addDom(index);
      }
      // 判断当前列表的总长度与激活状态的数量是否一致,一致则激活,反之则关闭
      this.checkAll = totalCount === someStatusCount ? event : !event;
      // 判断多选框是否处于中立状态
      this.isIndeterminate =
        someStatusCount > 0 && someStatusCount < totalCount;
    },
    // 模态框中点击添加
    addDom(index) {
      // 点击添加时,将该条数据的check状态和disabled状态进行变更
      let list = this.tableData[index];
      list.check = true;
      list.disabled = true;
      this.rowActiveList.push(list);
      // 将要添加的数据通过$emit("changeList")方法追加至list中
      this.$emit("changeList", list);
    },
    handleSizeChange(e) {
      this.pagi.pageSize = e;
      this.$emit("changeCurrent", e);
    },
    // 切换页数
    handleCurrentChange(e) {
      this.pagi.page = e;
      this.$emit("changeCurrent", e);
    },

    removeDom(index) {
      // 点击添加时,将该条数据的check状态和disabled状态进行变更
      let list = this.tableData[index];
      list.check = false;
      list.disabled = false;
      let newIndex = this.rowActiveList.findIndex((item) => item.id == list.id);
      this.rowActiveList.splice(newIndex, 1);
      // 将要添加的数据通过$emit("deleteList")方法从list中删除
      this.$emit("deleteList", list);
    },

    // 展开行时触发的函数
    changExpand(row) {
      this.activeCurrentIndex = this.tableData.findIndex(
        (item) => item.id == row.id
      );
      this.$forceUpdate();
      console.log('123');
    },
    changExpand1(row) {
      this.activeCurrentIndex = this.tableData.findIndex(
        (item) => item.id == row.id
      );
      console.log(this.activeCurrentIndex);
    }
  },
};
</script>


<style lang='scss' scoped>
.contents {
  width: 100%;
  height: 100%;
}
</style>